<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <script
      type="text/javascript"
      src="/___vscode_livepreview_injected_script"
    ></script>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Put your description here." />
    <title>flex 布局</title>
    <style>
      body {
        margin: 0;
        height: 100vh;
        background-color: #eee;
      }
      /* * {
        border: 1px solid black;
      } */
      .flex {
        display: flex;
      }
      .baiSe {
        background-color: white;
      }
      .flex1 {
        flex: 1;
      }
      .column {
        flex-direction: column;
      }
      .mg8 {
        margin: 8px;
      }
      .mgr8 {
        margin-right: 8px;
      }
      .mgt8 {
        margin-top: 8px;
      }
      .yinying {
        box-shadow: rgb(0 0 0 /20%) 0px 2px 1px -1px,
          rgb(0 0 0 /14%) 0px 1px 1px 0px, rgb(0 0 0 /12%) 0px 1px 3px 0px;
      }
      .daoHang {
        padding: 10px 20px;
        border-bottom: 1px solid rgb(190, 190, 190);
        font-size: 14px;
        color: #666;
      }
      /* 当屏幕宽度小于600px时要改变的css */
      @media (max-width: 600px) {
        .ceBian {
          display: none;
        }
        .neiRong {
          flex-direction: column;
        }
        .shuJuQu {
          flex-direction: column;
        }
        .youQu {
          margin-left: 8px;
        }
        .shuJu {
          margin: 0 0 8px;
          flex: auto;
        }
      }
      .neiRong::-webkit-scrollbar {
        display: none;
      }
    </style>
  </head>
  <body class="flex">
    <!-- 侧边栏 -->
    <div style="width: 200px; z-index: 2" class="ceBian yinying">
      <!-- 头像栏 -->
      <div
        style="
          padding: 10px;
          align-items: center;
          justify-content: center;
          border-bottom: 1px solid #999;
        "
        class="flex"
      >
        <img
          src="https://kangwenchang.com/logo.png"
          width="40px"
          height="40px"
          alt=""
        />
        <div style="margin-left: 10px">胡合意</div>
      </div>
      <!-- 导航栏 -->
      <div class="flex1">
        <div class="daoHang">导航</div>
        <div class="daoHang">导航</div>
        <div class="daoHang">导航</div>
        <div class="daoHang">导航</div>
        <div class="daoHang">导航</div>
      </div>
    </div>
    <!-- 主区域 -->
    <div class="flex1 flex column">
      <!-- 头部栏 -->
      <div style="height: 60px; z-index: 1" class="baiSe yinying"></div>
      <!-- 内容区 -->
      <div style="overflow: auto" class="neiRong flex1 flex">
        <!-- 左区 -->
        <div style="flex: 3" class="flex column mg8">
          <!-- 数据区 -->
          <div class="flex shuJuQu">
            <!-- 数据块 -->
            <div
              style="height: 100px"
              class="shuJu flex1 baiSe mgr8 yinying"
            ></div>

            <div
              style="height: 100px"
              class="shuJu flex1 baiSe mgr8 yinying"
            ></div>

            <div
              style="height: 100px"
              class="shuJu flex1 baiSe mgr8 yinying"
            ></div>

            <div style="height: 100px" class="shuJu flex1 baiSe yinying"></div>
          </div>
          <!--列表区 -->
          <div class="flex column">
            <!-- 列表项 -->
            <div style="height: 160px" class="baiSe mgt8 yinying"></div>
            <div style="height: 160px" class="baiSe mgt8 yinying"></div>
            <div style="height: 160px" class="baiSe mgt8 yinying"></div>
            <div style="height: 160px" class="baiSe mgt8 yinying"></div>
            <div style="height: 160px" class="baiSe mgt8 yinying"></div>
            <div style="height: 160px" class="baiSe mgt8 yinying"></div>
          </div>
        </div>
        <!-- 右区 -->
        <div style="flex: 1" class="youQu flex column mgr8 mgt8">
          <!-- 提示区 -->
          <div style="height: 150px" class="baiSe yinying"></div>
          <!-- 消息区 -->
          <div style="height: 300px" class="baiSe mgt8 yinying"></div>
        </div>
      </div>
    </div>
  </body>
</html>